<template>
  <div class="lottery-dice-cleaner">
    <div class="select-row">
      <div class="tail-box-wrapper">
        <tail-box :place="item.place.context"></tail-box>
      </div>
      <div class="dice">
         <lottery-dice 
          v-for="(dices, index) in item.numbers" 
          :key="dices.id"
          :dices="dices"
          class="dices"
          :index="index"
          @click.native="handleLotterySelect(index)"
        ></lottery-dice>
      </div>
      <div class="cleaner">
        <div 
          class="clear button-unselected" 
          v-if="!item.showSelector"
          @click="handleBtnClear"
          >
          <span class="icon" :class="count == 0 ? '' : 'active'"><i class="iconfont iconty_qingkong"></i></span>
        </div>
      </div>
    </div>
</div>
</template>

<script>
import LotteryDice from '@/components/base/lottery-dice/lottery-dice'
import NumberSelector from '@/components/base/number-selector/number-selector'
import TailBox from '@/components/tail-box/tail-box'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    LotteryDice,
    NumberSelector,
    TailBox
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '组合'
          },
          diceInfo: [
            {
              id: 1,
              selected: false,
              numbers: '1',
              color: 'red',
              icon: 'iconshaizi_one',
            },
            {
              id: 2,
              selected: false,
              numbers: '2',
              icon: 'iconshaizi_two',
            },
            {
              id: 3,
              selected: false,
              numbers: '3',
              icon: 'iconshaizi_three',
            },
            {
              id: 4,
              selected: false,
              numbers: '4',
              color: 'red',
              icon: 'iconshaizi_four',
            },
            {
              id: 5,
              selected: false,
              numbers: '5',
              icon: 'iconshaizi_fives',
            },
            {
              id: 6,
              numbers: '6',
              icon: 'iconshaizi_six',
              selected: false
            },
          ]  
        }
      }
    }
  },
  data() {
    return {
      count: 0
    }
  },
  created() {
  },
  methods: {
    // 直接选择
    handleLotterySelect(index) {
      this.count = 0
      let diceObj = this.clonedItem.numbers[index]
      diceObj.selected = diceObj.selected ? false : true
      this.$emit('click', this.clonedItem)
    },
   // 清空按钮清空选中状态
    handleBtnClear() {
      this.clear()
    },
    clear() {
      this.clonedItem.numbers.forEach(item => {
        item.selected = false
      })
      this.$emit('click', this.clonedItem)
      this.count = 0
    },
     // 统计选中彩票个数
    countNumber(numbers) {
      numbers.forEach(value => {
        if (value.selected)  {
          this.count++
        }
      })
    },
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    }
  },
  watch: {
    item(newVal) {
      this.count = 0
      this.countNumber(newVal.numbers)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .dice >>> .row 
    margin-right 20px
  .lottery-dice-cleaner
    box-sizing border-box 
    padding 0 20px
    .select-row 
      display flex
      align-items center
      margin 20px 0
      .tail-box-wrapper   
        margin-right 20px
      .dice 
        display flex
      .cleaner
        flex 1 
        display flex 
        justify-content flex-end
        .clear 
          width 50px
          height 32px 
          line-height 32px
          text-align center
          border-radius 16px
          .active 
            color $color-theme-red
        
</style>